<template>
    <div class="boxs">
        <el-upload class="avatar-uploader" name="file" action="" :show-file-list="false">
        </el-upload>
        <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption">
        </quill-editor>
        <!-- 富文本内容 -->
        <span>
            <el-button type="primary" @click="save()">确 定</el-button>
        </span>
    </div>
</template> 
<script>
import { quillEditor } from "vue-quill-editor";
// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、2 级标题
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    [{ script: "sub" }, { script: "super" }], // 上标/下标
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    // [{'direction': 'rtl'}],                         // 文本方向
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除文本格式
];
export default {
    data() {
        return {
            content: "", // 内容
            // content: null,
            editorOption: {
                placeholder: "请输入文章内容",
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                    },
                },
            },
        };
    },
    methods: {
        save() {
            //点击按钮,给父组件传值
            // console.log("this.content", this.content);
            this.$emit("xiaoming", this.content)
        },
    },
    mounted() {
        this.save()
    },
    components: {
        quillEditor
    }
};
</script> 
<style scoped>
.boxs>span{
    margin-left: 400px;
}
</style>   
  
  